﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板</title>
	<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"content="black-translucent">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>



<style>
	*{
		padding: 0;
		margin: 0;
		font:12px Microsoft YaHei;
	}
	
	::-webkit-scrollbar {
	    width: 6px;
	    height: 1px;
	    background-color: #F5F5F5;
	}
	
	::-webkit-scrollbar-thumb {
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	    background-color: #555;
	}
	body{
	    background-image: -o-linear-gradient(bottom, #D6FFFC 48%, #FFE5BD 99%);
		background-image: -moz-linear-gradient(bottom, #D6FFFC 48%, #FFE5BD 99%);
		background-image: -webkit-linear-gradient(bottom, #D6FFFC 48%, #FFE5BD 99%);
		background-image: -ms-linear-gradient(bottom, #D6FFFC 48%, #FFE5BD 99%);
		background-image: linear-gradient(to bottom, #D6FFFC 48%, #FFE5BD 99%);
	}
	/*#top {
		position: absolute;
		top: 5px;left: 0;
		height: 40px;
		width: 100%;
		font-size: 18px;
		text-align: center;
		line-height: 40px;
	}*/
	#main {
		
		width: 98%;
	
		margin: 0px auto;
		margin-bottom: 45px;
	}
	.customer{
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.customer_content {
		margin: 15px 5px;
		
	}
	.customer_content span{
		margin: 0 0 0 5px;
		position: relative;
		left: 15px;
		top: -5px;
		float: left;
		color: #2473FF;
	
	}
	.customer_content i {
		color: #B8B8B8;
		margin: 5px;
	}
	.customer img{
		float: left;
		width: 50px;
		height: 50px;
	}
	.customer p {
		position: relative;
		left: 20px;
		width: 70%;
		display: inline-block;
		border-radius: 5px;
		background: #fff;
		padding: 10px;
		
		/*box-shadow: 0px 0px 1px 0px;*/
	}
	.customer p:before{
		content: "▲";
		position: absolute;
		left: -19px;
		top: -6px;
		font-size: 30px;
		overflow: hidden;
		-webkit-transform:rotate(-90deg); 
		color: #fff;
		/*text-shadow: 0px 0px 0px #0D0D0D, 0px 0px 2px #aaa;*/
		z-index: -1;
	}
	.admin{
		position: relative;
		width: 100%;
		margin: 0 auto;
	}
	.admin_content {
		margin: 15px 5px;
	}
		/*清楚两种对话框浮动*/
	.admin_content:after{
		content: " ";
		clear: both;
		display: block;
	}   
	/*清楚两种对话框浮动*/
	.admin_content span{
		margin: 5px;
		position: relative;
		right: 15px;
		top: -5px;
		float: right;
		color: #FF6395;
	}
	
	.admin_content i {
		color: #B8B8B8;
		margin: 10px;
	}
	.admin img{
		float: right;
		width: 50px;
		height: 50px;
	}
	.admin p {
		position: relative;
		right: 20px;
		float: right;
		top: -5px;
		max-width: 70%;
		display: inline-block;
		border-radius: 5px;
		background: #fff;
		padding: 10px;
		/*box-shadow: 0px 0px 1px 0px;*/

	}
	.admin p:after{
		content: "▲";
		position: absolute;
		right: -19px;
		top: -5px;
		font-size: 30px;
		overflow: hidden;
		-webkit-transform: rotate(90deg);
		color: #fff;
		/*text-shadow:1px 1px 1px 1px;*/
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 45px;
		width: 100%;
		border-top: 1px solid #ccc;
		z-index: 999;
		background: rgb(243, 243, 243);
	}
	form{
		width: 95%;
		height: 45px;
		line-height: 45px;
		margin:  0 auto;
	}
	input {
		-webkit-appearance:none;
		outline:none;
		height: 30px;
	}
	.text {
		border: 1px solid #ccc;
		width: 70%;
		border-radius: 10px;
		text-indent: 10px;
	}
	.button {
		border: 1px;
		border-radius: 5px;
		width: 22%;
		margin: 0 0 0 13px;
		background: #3E55FF;
		color: #fff;
	}
</style>
</head>
<body  >
	<!-- <div id="top">
		要多多给我们留言噢
	</div> -->
	<div id="main"><volist name="list" id="vo">
		<div class="customer">
			<div class="customer_content">
				<img src="http://cdn-img.easyicon.net/png/5592/559200.gif" alt="">
			<span>{$vo.name}<i>{$vo.cTime|time_format}</i></span>
				<p>{$vo.content}</p>

			</div>
		</div></volist>
			
		<div class="admin">
			<div class="admin_content">
				<img src="http://cdn-img.easyicon.net/png/5592/559200.gif" alt="">
				<span><i>11月7日 18:01</i>管理员</span>
					<p>我是黄哲宇  司法啊手机登陆法局啊手机登陆法局啊手机登陆法局啊手机登陆发送旅客放假了凯萨琳</p>
			</div>
		</div>
		<div class="customer">
			<div class="customer_content">
				<img src="bg1.jpg" alt="">
			<span>用户：黄哲宇 <i>11月7日 18:01</i></span>
				<p>我是黄哲宇  局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局司法局啊手机登陆法局</p>

			</div>
		</div>
		<div class="admin">
			<div class="admin_content">
				<img src="bg1.jpg" alt="">
				<span><i>11月7日 18:01</i>管理员</span>
					<p>我是黄哲宇  司法啊手机登陆法局啊手机登陆法局啊手机登陆法局啊手机登陆发送旅客放假了凯萨琳</p>
			</div>
		</div>
		
	</div>
	<div class="footer">
			<form>
				<input id="content" type="text" placeholder="最多输入140个字" class="text" />
				<input type="button" value="留言" class="button" />
			</form>
	</div>

	

</body>

<script type="text/javascript">
	
	$(document).ready(function(){
		$("input[type=button]").click(function(){
			var content=$("#content");
			alert(content.val());
		});
		
	});
</script>

</html>